﻿<!DOCTYPE HTML>

<html>
<head>

	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Screenshare Demo</title>
	
	<link rel="stylesheet" type="text/css" href="bootstrap.css">

    <script src="jquery-1.8.2.min.js"></script>
    <script src="json.js"></script>

<!--Common function-->
<script type="text/javascript">
  function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
      return "Chrome";
    }
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if ((userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) || (!!window.ActiveXObject || "ActiveXObject" in window)) {
        return "IE";
    }; //判断是否IE浏览器
  }
  var isJson = function(obj){
    var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length; 
    return isjson;
  }
</script>

<script>

/** Event Message handler * */
function createMessage()
{
    var message = {
        "Type": "screenshare",
        "Action": "",
        "Message": "",
        "Data": ""
    };
    return message;
}
function postMessage(action) {
    var message = createMessage();
    message.Action = action;
    var evt = document.createEvent("CustomEvent");
    evt.initCustomEvent('myCustomEvent', true, false, JSON.stringify(message));
    // fire the event
    document.dispatchEvent(evt);
}
function listenerExeReponse() {
    document.addEventListener('myExeResponseEvent', function (response) {
        console.log(response.detail);
        //Process callback
        processUI(response.detail);
    }, false);
}
/** Event Message handler **/

/** UI Element and Event handler **/
function start() {
    $(".status").text("正在共享屏幕...");
    postMessage("START");
    
}

function stop() {
    $(".status").text("STOP");
    postMessage("STOP");
    
}

function query() {
    $(".status").text("Check ...");
    postMessage("QUERY");
    
}

function processUI(detail) {

    if (!isJson(detail)) {
        detail = JSON.parse(detail);
    }
    
    if (parseInt(detail.ExitCode) == 2) {
        //Status = Stop
        $("#stop").attr("disabled", "disabled");
        $("#start").removeAttr("disabled");
        $(".status").text("Stop");
    } else {
        $("#start").attr("disabled", "disabled");
        $("#stop").removeAttr("disabled");
        $(".status").text("正在共享屏幕...");
    }
}

function queryStatus4IE(){

	var exitCode = $("#start-screenshare").attr("exitCode");
	var exitCode2 = $("#query-screenshare").attr("exitCode");

	if((exitCode2 || exitCode) == 0){
		$(".status").text("正在共享屏幕...");
	}else{
		$(".status").text("STOP");
	}

}

function CheckStatus() {

    setTimeout(function () { 
    	var mb = myBrowser();
		if ("IE" == mb) {
			//document.getElementById("query-screenshare").click();
        	$("#query-screenshare").click();
		}else{
    		postMessage("QUERY"); 	
    	}
    	
    	CheckStatus(); 

    }, 3 * 1000);
}
/** UI Element and Event handler **/



$(function(){

  function init(){
    //以下是调用上面的函数
    var mb = myBrowser();
    if ("IE" == mb) {
        //alert("我是 IE");
        $(".ie").show();
    }
    if ("FF" == mb) {
        //alert("我是 Firefox");
        $(".firefox").show();
    }
    if ("Chrome" == mb) {
        //alert("我是 Chrome");
        $(".chrome").show();
    }
    if ("Opera" == mb) {
        //alert("我是 Opera");
    }
    if ("Safari" == mb) {
        //alert("我是 Safari");
    }
  }

  init();

  listenerExeReponse();

  CheckStatus();

});


function autoDownload(){
  window.open('Screenshare.msi');
}

</script>

<!--FOR IE ActiveXObject-->
<script type="text/javascript">
  function getUserAppData(){     
    var WshNetwork = new ActiveXObject("WScript.Network");     
    //alert("Domain = " + WshNetwork.UserDomain);     
    //alert("Computer Name = " + WshNetwork.ComputerName);     
    //alert("User Name = " + WshNetwork.UserName);     
    return "c:\\Users\\" + WshNetwork.UserName + "\\AppData";
  }   

  /*For IE*/
  function runScreenshare() {
      try {
        var appData = getUserAppData();
        var file = appData + "\\Roaming\\Screenshare\\ChromeNativeHost\\Screenshare.exe";
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        if(fso.FileExists(file)) {
               var shellActiveXObject = new ActiveXObject("WScript.Shell");
               if ( !shellActiveXObject ) {
                  alert('无法创建WScript.Shell');
                  return;
               }
               var exepath = file + ' \"{\""Type\"": \""screenshare\"",\""Action\"": \""START\"",\""Message\"": \""\"",\""Data\"": \""\""}\"';
             shellActiveXObject.Run(exepath, 1, false);
             shellActiveXObject = null;

             $(".status").text("正在共享屏幕...");
        }
        else {
              alert("系统检测到未安装ffmpeg_ScreenShare, 请检查Screenshare.msi是否下载!");
        }    
    }
    catch (errorObject){
        alert("请将站点设置为可信任站点，并将其安全级别设置为低! 然后再设置自定义级别 （Initialize and script ActiveX controls not marked as safe for scripting = Enable），步骤为：Tools(工具）->Internet Option...(IE 选项）->Security(安全）->Custom Level(用户自定义级别）。");
    }
  }
  function stopScreenshare() {
      try {
        var appData = getUserAppData();
        var file = appData + "\\Roaming\\Screenshare\\ChromeNativeHost\\Screenshare.exe";
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        if(fso.FileExists(file)) {
               var shellActiveXObject = new ActiveXObject("WScript.Shell");
               if ( !shellActiveXObject ) {
                  alert('无法创建WScript.Shell');
                  return;
               }
               var exepath = file + ' \"{\""Type\"": \""screenshare\"",\""Action\"": \""STOP\"",\""Message\"": \""\"",\""Data\"": \""\""}\"';
             shellActiveXObject.Run(exepath, 1, false);
             shellActiveXObject = null;

             $(".status").text("Stop");
        }
        else {
              alert("系统检测到未安装ffmpeg_ScreenShare, 请检查Screenshare.msi是否下载!");
        }    
    }
    catch (errorObject){
        alert("请将站点设置为可信任站点，并将其安全级别设置为低! 然后再设置自定义级别 （Initialize and script ActiveX controls not marked as safe for scripting = Enable），步骤为：Tools(工具）->Internet Option...(IE 选项）->Security(安全）->Custom Level(用户自定义级别）。");
    }
  }
</script>

</head>
<body onload="autoDownload()">

	<div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-right hide">
            <li><a href="Screenshare.msi" title="Download Screenshare.msi">Download Screenshare.msi</a></li>
            <li><a href="Screenshare.crx" title="Download Screenshare.crx">Download Chrome Extension</a></li>
            <li><a href="Screenshare.xpi" title="Download Screenshare.xpi">Download Firefox Extension</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Screenshare Demo</h3>
      </div>

      <div class="jumbotron" style="padding: 10px 20px;">
      	<div class="text-center text-danger h3">如果下载没有开始，<a href="Screenshare.msi" title="Download Screenshare.msi">请点击这里下载！</a></div>
        <h2>Screenshare Control Panel</h2>       
        <hr/>
        <br/>
        <div class="row">
        	<div class="col-md-6">
        		<div class="row chrome firefox" style="display: none;">
		        	<div class="col-md-4">
		        		<button class="btn btn-success" type="button" onclick="start()" id="start">Start Screenshare</button>
		        	</div>
		        	<div class="col-md-4">
						<button class="btn btn-info" type="button" onclick="query()" id="query">Check Screenshare</button>
		        	</div>
		        	<div class="col-md-4">
		        		 <button class="btn btn-danger" type="button" onclick="stop()" id="stop">Stop Screenshare</button>
		        	</div>
		        </div>
		        <div class="row ie" style="display: none;">
		        	<div class="col-md-4">
		        		<button class="btn btn-success" type="button" onclick="start()" id="start-screenshare">Start Screenshare</button>
		        	</div>
		        	<div class="col-md-4">
						<button class="btn btn-info" type="button" onclick="queryStatus4IE()" id="query-screenshare">Check Screenshare</button>
		        	</div>
		        	<div class="col-md-4">
		        		 <button class="btn btn-danger" type="button" onclick="stop()" id="stop-screenshare">Stop Screenshare</button>
		        	</div>
		        </div>
		        <br/>
		        <br/>
		        <div class="row">
			        <div class="col-md-6" style="font-size:18px;">
			        	<span>Status: &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="status text-danger h3"></span>
			        </div>
			    </div> 
        	</div>
        	<div class="col-md-6">
        		<div class=" row">
			        <div class="col-lg-12" >
			          <h5 class="text-danger">1Screenshare 软件安装说明</h5>
			          <p style="font-size:14px;">1. 安装程序文件Screenshare.msi，已经包含ffmpeg_ScreenShare.exe。  默认安装路径C:\\Users\\{User}\\AppData\\Roaming\\Screenshare\\ChromeNativeHost。<br/>2. 路径不可以修改， 安装此软件前，请先安装Chrome, Firefox浏览器。<br/>3. .Net framework 4.0， （ .Net framework 2.0稍后支持）</p>     
			        </div>

			      </div>
        	</div>
        </div>
        
		 

      </div>

      
 		
    
      <div class="row marketing chrome" style="display:none;">
        <div class="col-lg-12">
          <p><span class="text-success h4">Chrome 插件安装说明</span> <a class="h3 text-info text-underline" href="Screenshare.crx" title="Download Screenshare.crx" style="text-decoration: underline;"> 点击下载插件</a></p>
          <p>打开 chrome://extensions/</p>
          <p>把 Screenshare.crx文件拖拽进去，进行安装。</p>     
          <p class="text-danger">注： 如果Chrome不能够正常工作或者是安装Screenshare之后才安装的，<br/> 请用管理员身份执行此命令行 (Run C:\\Users\\{User}\\AppData\\Roaming\\Screenshare\\ChromeNativeHost\\InitScreenshare.exe init)，重新注册一次注册表。有些机器可能没有写注册表的权限，写入也可能会有失败的情况。
          </p>          
        </div>
      </div>


      <div class="row marketing firefox" style="display:none;">      
        <div class="col-lg-12">
          <p><span class="text-success h4">Firefox 插件安装说明</span> <a class="h3 text-info text-underline" href="Screenshare.xpi" title="Download Screenshare.xpi" style="text-decoration: underline;"> 点击下载插件</a></p>
          <p>打开firefox浏览器，输入如下命令（about:config），开启调试模式，设置不用签名之类的。</p>
          <p>搜索这个值（xpinstall.signatures.required = false），设置为false，默认是true。</p>
          <p>直接拖拽 Screenshare.xpi  到firefoxe窗口就行了，然后他会提示安装，重启。</p>
        </div>
      </div>

      <div class="row marketing ie-hide" style="display:none;">      
        <div class="col-lg-12">
          <p><span class="text-success h4">IE 插件说明</span></p>
          <p>暂时是使用 ActiveXObject 的方式来启动Screenshare的，插件还在开发中。</p>
          <p>如果遇到不能打开的情况，请做如下检查。</p>
          <p>请将站点设置为可信任站点，并将其安全级别设置为低! 然后再设置自定义级别 （Initialize and script ActiveX controls not marked as safe for scripting = Enable）</p>
          <p>步骤为：Tools(工具）->Internet Option...(IE 选项）->Security(安全）->Custom Level(用户自定义级别）。</p>
        </div>
      </div>


      <h3>Thank You!</h3>

      <br/>
      <br/>

      <hr/>
      
      <footer class="footer">
        <p>&copy; Company 2016  mosai</p>
      </footer>

    </div> <!-- /container -->

</body>
</html>